<template>
  <view class="help-center">
    <!-- 导航栏 -->
 

    <!-- 页面标题 -->
    <view class="page-title">常见问题解答</view>

    <!-- 帮助分类列表 -->
    <view class="help-categories">
      <!-- 功能使用类 -->
      <view class="category-item">
        <view class="category-title">功能使用</view>
        <view class="faq-list">
          <!-- 问题项 - 可展开/折叠 -->
          <view class="faq-item" v-for="(item, index) in functionFAQs" :key="index">
            <view class="faq-question" @click="toggleFaq(index, 'function')">
              <text>{{ item.question }}</text>
              <wd-icon 
                :name="item.expanded ? 'arrow-up' : 'arrow-down'" 
                size="30rpx" 
                color="#666"
              ></wd-icon>
            </view>
            <view class="faq-answer" v-if="item.expanded">
              {{ item.answer }}
            </view>
          </view>
        </view>
      </view>

      <!-- 联系相关类 -->
      <view class="category-item">
        <view class="category-title">联系相关</view>
        <view class="faq-list">
          <view class="faq-item" v-for="(item, index) in contactFAQs" :key="index">
            <view class="faq-question" @click="toggleFaq(index, 'contact')">
              <text>{{ item.question }}</text>
              <wd-icon 
                :name="item.expanded ? 'arrow-up' : 'arrow-down'" 
                size="30rpx" 
                color="#666"
              ></wd-icon>
            </view>
            <view class="faq-answer" v-if="item.expanded">
              {{ item.answer }}
            </view>
          </view>
        </view>
      </view>

      <!-- 健康数据类 -->
      <view class="category-item">
        <view class="category-title">健康数据</view>
        <view class="faq-list">
          <view class="faq-item" v-for="(item, index) in healthFAQs" :key="index">
            <view class="faq-question" @click="toggleFaq(index, 'health')">
              <text>{{ item.question }}</text>
              <wd-icon 
                :name="item.expanded ? 'arrow-up' : 'arrow-down'" 
                size="30rpx" 
                color="#666"
              ></wd-icon>
            </view>
            <view class="faq-answer" v-if="item.expanded">
              {{ item.answer }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 紧急帮助入口 -->
    <view class="emergency-help" @click="callSupport">
      <wd-icon name="phone" size="40rpx" color="#fff"></wd-icon>
      <text class="emergency-text">联系客服协助</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 功能使用类问题
const functionFAQs = ref([
  {
    question: '如何添加新的联系人？',
    answer: '1. 点击底部"我的"按钮；2. 选择"联系人管理"；3. 点击右上角"+"号；4. 填写姓名和手机号后保存即可。',
    expanded: false
  },
  {
    question: '怎样查看健康报告历史记录？',
    answer: '在健康报告页面，点击底部"查看历史记录"按钮，即可看到过去7天的健康数据记录。',
    expanded: false
  },
  {
    question: '字体太小看不清怎么办？',
    answer: '1. 点击底部"我的"按钮；2. 选择"设置"；3. 点击"字体大小"；4. 滑动滑块调整到合适大小后确定。',
    expanded: false
  }
])

// 联系相关类问题
const contactFAQs = ref([
  {
    question: '点击手机号没反应怎么办？',
    answer: '请检查手机是否开启了通话权限：1. 打开手机"设置"；2. 找到"应用管理"；3. 选择本应用；4. 开启"电话"权限即可。',
    expanded: false
  },
  {
    question: '如何快速拨打紧急电话？',
    answer: '在首页点击"紧急呼叫"按钮，即可直接拨打预设的紧急联系人电话（默认是您的女儿或儿子）。',
    expanded: false
  }
])

// 健康数据类问题
const healthFAQs = ref([
  {
    question: '血压数据怎么添加？',
    answer: '1. 在首页点击"血压"卡片；2. 输入收缩压和舒张压数值；3. 点击"保存"即可记录本次测量数据。',
    expanded: false
  },
  {
    question: '睡眠数据不更新怎么办？',
    answer: '请确保您的设备已连接网络，并且在睡觉时保持设备正常佩戴。如果仍有问题，可尝试重启设备后再观察。',
    expanded: false
  }
])

// 切换问题展开/折叠状态
const toggleFaq = (index, type) => {
  switch(type) {
    case 'function':
      functionFAQs.value[index].expanded = !functionFAQs.value[index].expanded
      break
    case 'contact':
      contactFAQs.value[index].expanded = !contactFAQs.value[index].expanded
      break
    case 'health':
      healthFAQs.value[index].expanded = !healthFAQs.value[index].expanded
      break
  }
}

// 联系客服
const callSupport = () => {
  uni.makePhoneCall({
    phoneNumber: '4008123456',
    fail: () => {
      uni.showToast({ title: '拨打失败，请稍后重试', icon: 'none' })
    }
  })
}
</script>

<style scoped>
.help-center {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 150rpx; /* 预留底部按钮空间 */
}

/* 页面标题 */
.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  padding: 30rpx 0;
  background-color: #fff;
  margin-bottom: 20rpx;
}

/* 分类容器 */
.help-categories {
  padding: 0 20rpx;
}

/* 分类标题 */
.category-item {
  background-color: #fff;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.category-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #5a67d8;
  padding: 25rpx 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

/* 问答列表 */
.faq-list {
  padding: 10rpx 0;
}
.faq-item {
  border-bottom: 2rpx solid #f5f5f5;
}
.faq-item:last-child {
  border-bottom: none;
}

/* 问题样式 */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
.faq-question:active {
  background-color: #f5f7ff;
}

/* 答案样式 */
.faq-answer {
  padding: 0 30rpx 30rpx;
  font-size: 30rpx;
  color: #666;
  line-height: 1.6; /* 行高放大，更易读 */
  background-color: #f9f9f9;
}

/* 紧急帮助按钮 */
.emergency-help {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 100rpx;
  background-color: #5a67d8;
  border-radius: 50rpx;
  color: #fff;
  font-size: 34rpx;
  box-shadow: 0 5rpx 15rpx rgba(90, 103, 216, 0.3);
}
.emergency-text {
  margin-left: 15rpx;
}
</style>